<template>
    <div class="content_panel project_modules amount_remission_wait_list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('collection.messageTemplate')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="type">
                            <el-select v-model="form.type" clearable :placeholder="$t('collection.templateType')" style="width: 100%"><!--模板类型-->
                                <el-option key="1" :label="$t('collection.smsTemplate')" value="1"><!--短信模板--></el-option>
                                <el-option key="2" :label="$t('collection.mailTemplate')" value="2"><!--邮件模板--></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="name">
                            <el-input v-model="form.name" :placeholder="$t('collection.templateName')" clearable></el-input><!--模板名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="remark">
                            <el-input v-model="form.remark" :placeholder="$t('common.remark')" clearable></el-input><!--备注-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="addHandler('add')" type="primary">{{ $t('common.add') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="type" :label="$t('collection.templateType')" min-width="160"><!--模板类型-->
                            <template slot-scope="scope">{{ scope.row.type | switchType }}</template>
                        </el-table-column>
                        <el-table-column prop="name" :label="$t('collection.templateName')" min-width="180"></el-table-column><!--模板名称-->
                        <el-table-column prop="content" :label="$t('collection.templateContent')" min-width="110">
                            <template slot-scope="{ row }"><el-button @click="checkTemplate(row)" type="text">{{ $t('common.check') }}</el-button></template>
                        </el-table-column><!--模板内容-->
                        <el-table-column align="left" :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column :label="$t('common.remark')" prop="remark" min-width="220" :show-overflow-tooltip="true"></el-table-column><!--备注-->
                        <el-table-column prop="updateTime" :label="$t('collection.lastEdit')" min-width="170"><!--最近一次编辑-->
                            <template slot-scope="{ row }">{{ row.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" min-width="180">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.type === 1" @click="addHandler('edit',scope.row)" type="text">{{ $t('finance.edit') }}</el-button><!--编辑-->
                                <el-button v-if="scope.row.type === 1" @click="deleteHandler(scope.row)" type="text">{{ $t('system.delete') }}</el-button><!--删除-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>

        <!--新增&编辑弹窗-->
        <el-dialog :visible.sync="addDialog.isVisible" :title="$t('collection.messageTemplate')" width="600px" class="add-dialog" :close-on-click-modal="false">
            <div class="content">
                <el-form ref="addDialog.form" :model="addDialog.form" :rules="addDialog.rules" :inline="false" class="module_form">
                    <el-form-item prop="appName" :label="$t('system.appName')"> <!--APP名称-->
                        <el-select v-model="addDialog.form.appName" :placeholder="$t('verify.plsChoose')" clearable style="width:100%;" :disabled="addDialog.type === 'edit'">
                            <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('collection.templateType')" prop="type">
                        <el-select v-model="addDialog.form.type" clearable :placeholder="$t('verify.plsChoose')" style="width: 100%"><!--模板类型-->
                            <el-option key="1" :label="$t('collection.sms')" :value="1"><!--短信--></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('collection.templateName')" prop="name"><!--模板名称-->
                        <el-input v-model="addDialog.form.name" maxlength="50" type="text" :placeholder="$t('verify.plsInput')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('collection.templateContent')" prop="content"><!--模板内容-->
                        <el-input v-model="addDialog.form.content" maxlength="3000" :rows="6" type="textarea" :placeholder="$t('verify.underXWords',{x: '3000'})"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('common.remark')" prop="remark"><!--备注-->
                        <el-input v-model="addDialog.form.remark" maxlength="200" :rows="3" type="textarea" :placeholder="$t('verify.underXWords',{x: '200'})"></el-input>
                    </el-form-item>
                    <div class="btn-box">
                        <el-button @click="addDialog.isVisible = false" type="primary">{{ $t('common.cancel') }}</el-button>
                        <el-button @click="addSubmit" type="primary">{{ $t('common.confirm') }}</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>

        <!--查看模版弹窗-->
        <el-dialog :visible.sync="templateDialog.isVisible" :title="$t('common.check') + '-' + (templateDialog.type === 2 ? $t('collection.mailTemplate') : $t('collection.smsTemplate'))" width="900px" class="template-dialog">
            <div class="title">{{ templateDialog.name }}</div>
            <div class="content">
                <div v-if="templateDialog.type === 1">{{ templateDialog.content }}</div>
                <div v-if="templateDialog.type === 2" v-html="templateDialog.content"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import SelectAppList from '@/components/select-app-list';

    let that = null;
    export default {
        name: 'collection-messageManage-messageTemplate',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                tableData: [],
                appList: [],
                companyName: this.$storage.get('user').companyName,
                form: {
                    appName: '',
                    type: '',
                    name: '',
                    remark: '',
                },
                rules: {
                },
                addDialog: {
                    isVisible: false,
                    type: '',
                    form: {
                        type: '',
                        name: '',
                        content: '',
                        remark: '',
                    },
                    rules: {
                        appName: [
                            {required: true, message: this.$t('verify.plsChoose')},
                        ],
                        type: [
                            {required: true, message: this.$t('verify.plsChoose')},
                        ],
                        name: [
                            {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'},
                        ],
                        content: [
                            {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                        ]
                    },
                },
                templateDialog: {
                    isVisible: false,
                    type: '',
                    name: '',
                    content: '',
                }
            };
        },
        methods: {
            // 获取列表数据
            getTableData(page = this.page) {
                const form = this.form;
                const params = {
                    appName: form.appName,
                    type: form.type,
                    name: form.name,
                    remark: form.remark,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                this.$api.collection.listPageTemplate(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                        //防止类似总共21条数据，第21条操作后变成20条数据，但请求页数依旧是第2页
                        if (this.tableData.length == 0 && page.currentPage > 1) {
                            this.getTableData({currentPage: page.currentPage - 1});
                        }
                    }
                    this.tableMaxHeight = document.body.clientHeight - 210;
                });
            },
            search() {
                this.getTableData();
            },
            addHandler(type,row) {
                this.addDialog.form = {
                    appName: '',
                    type: '',
                    name: '',
                    content: '',
                    remark: '',
                };
                this.$nextTick( () => {
                    this.$refs['addDialog.form'].clearValidate();
                });
                this.addDialog.type = type;
                if(type === 'edit') {
                    this.addDialog.form = Object.assign(this.addDialog.form,row);
                }
                this.addDialog.isVisible = true;
            },
            addSubmit() {
                this.$refs['addDialog.form'].validate((valid) => {
                    if (valid) {
                        const form = this.addDialog.form;
                        const params = {
                            appName: form.appName,
                            type: form.type,
                            name: form.name,
                            content: form.content,
                            remark: form.remark,
                            subject: form.subject || '',
                        };
                        if(this.addDialog.type === 'add') {// 新增
                            this.$api.collection.addTemplate(params).then(res => {
                                const {status, data, error, msg} = res;
                                if ('1' === status && '00000000' === error) {
                                    this.getTableData();
                                    this.$message.success(this.$t('common.successfulOperation'));
                                    this.addDialog.isVisible = false;
                                }
                                else if ('1' === status && '00000000' !== error){
                                    this.$message.error(msg);
                                }
                            });
                        }
                        if(this.addDialog.type === 'edit') {// 编辑
                            params.id = form.id;
                            params.templateNid = form.templateNid;
                            params.isDeleted = form.isDeleted;
                            this.$api.collection.editTemplate(params).then(res => {
                                const {status, data, error, msg} = res;
                                if ('1' === status && '00000000' === error) {
                                    this.getTableData();
                                    this.$message.success(this.$t('common.successfulOperation'));
                                    this.addDialog.isVisible = false;
                                }
                                else if('1' === status && '00000000' !== error){
                                    this.$message.error(msg);
                                }
                            });
                        }
                    }
                })
            },
            deleteHandler(row) {
                const params = {
                    id: row.id,
                };
                this.$api.collection.delTemplate(params).then(res => {
                    const {status, data, error, msg} = res;
                    if ('1' === status && '00000000' === error) {
                        this.getTableData();
                        this.$message.success(this.$t('common.successfulOperation'));
                    }
                    else {
                        this.$message.error(msg);
                    }
                });
            },
            checkTemplate(row) {
                this.templateDialog.type = row.type;
                this.templateDialog.name = row.name;
                this.templateDialog.content = row.content;
                this.templateDialog.isVisible = true;
            },
            getCompanyList() {
                const params = {
                    appListDomain: this.$storage.get('user').domain,
                };
                this.$api.systemManage.getAppListdomain(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.appList = data || [];
                    }      
                });
            },
        },
        filters: {
            switchType(type) {
                switch (type + '') {
                    case '1':
                        return that.$t('collection.smsTemplate');// 短信模板
                    case '2':
                        return that.$t('collection.mailTemplate');// 邮件模板
                    default:
                        return type;
                }
            }
        },
        created() {
            that = this;
            this.getTableData();
            this.getCompanyList();
        }
    }
</script>
<style lang="scss" scoped>
    [data-page=collection-messageManage-messageTemplate] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .add-dialog {
            .el-form-item {
                margin-bottom:10px;
            }
            .btn-box {
                padding:20px 0 0 0;
                text-align: center;
            }
        }
        .template-dialog {
            .title {
                font-size:18px;
                font-weight:bold;
            }
            .content {
                padding:20px 0 0 0;
                overflow: scroll;
            }
        }
    }
</style>

